<template>
    <div class="container">
        <h3 class="title">列表</h3>
        <div class="line"></div>
        <ul class="list">
            <li class="item" v-for="(item, index) in list" :key="index" :class="{ open: currentIndex == index }" @touchstart="touchStart" @touchend="touchEnd(index,$event)">
                <div class="left-content" @click="doSomething(index)">
                    <div class="avatar"></div>
                    <div class="content">
                        <h4>{{item.name}}</h4>
                        <p>{{item.tips}}</p>
                    </div>
                </div>
                <div class="right-content" @click="deleteItem(index)">删除</div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'HomePage',
    data() {
        return {
            list: [
                {
                    name: '小敏',
                    tips: '你好啊',
                    open: false
                },
                 {
                    name: '小敏',
                    tips: '你好啊',
                    open: false
                },
                 {
                    name: '小敏',
                    tips: '你好啊',
                    open: false
                },
                 {
                    name: '小敏',
                    tips: '你好啊',
                    open: false
                }
            ],
            startClientX: 0,
            endClientX: 0,
            currentIndex: null
        }
    },
    methods: {
        //滑动开始
        touchStart(e) {
            this.startClientX = e.touches[0].clientX;
            // console.log(t)
        },
        // 划动结束
        // touchEnd(index, e) {
        //     // let index = e.currentTarget.dataset.id;
        //     this.endClientX = e.changedTouches[0].clientX;
        //     if(this.startClientX - this.endClientX > 30 && !this.list[index].open) {
        //         this.closeAll();
        //         this.list[index].open = true
        //     }
        //     if(this.endClientX - this.startClientX > 30) {
        //         this.closeAll();
        //     }
        //     this.startClientX = 0;
        //     this.endClientX = 0;
        // },
        touchEnd(index, e) {
            this.endClientX = e.changedTouches[0].clientX;
            if(this.startClientX - this.endClientX > 30 && index != this.currentIndex){
                this.currentIndex = index
            }

            if(this.endClientX - this.startClientX > 30) {
                this.currentIndex = null
            }

            this.startClientX = 0;
            this.endClientX = 0;
        },
        // //关闭所有
        // closeAll() {
        //     for(let i = 0; i < this.list.length; i ++) {
        //         this.list[i].open = false
        //     }
        // },
        doSomething(index) {
            if(this.currentIndex >= 0) {
                this.currentIndex = null
            }else {
                alert(index)
            }
        },
        // //判断是否有展开的item
        // checkItemStatus() {
        //     return this.currentIndex === null ? false : true
        // },
        //删除滑块
        deleteItem(index) {
            this.list.splice(index, 1)
        }
    }
}
</script>
<style>
.title {
    font-size: 0.26rem;
    padding: 0.5rem 0;
}
.line {
    height: 1px;
    background: #eee;
}
.list {
    overflow: hidden;
}
.item {
    height: 1.6rem;
    display: flex;
    align-items: center;
    position: relative;   
    padding: 0 0.18rem;
    box-sizing: border-box;
    transform: translate(0, 0); 
    transition: transform 0.3s;
}
.item:after {
    content: " ";
    position: absolute;
    left: 0.18rem;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #eee;
}
.left-content {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0.18rem;
    right: 0.18rem;
    top: 0;
    bottom: 0;
}
.avatar {
    width: 1rem;
    height: 1rem;
    background: #ff0000;
    margin-right: 0.18rem;
}
.content {
    font-size: 0.12rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.right-content {
    width: 2rem;
    height: 1.6rem;
    background: #ff0000;
    line-height: 1.6rem;
    font-size: 0.32rem;
    text-align: center;
    position: absolute;
    right: -2rem;
    color: #fff;
}
.open {
    transform: translate(-2rem,0)
}
</style>
